<template>
  <div class="model-nestview">
    <!-- <div class="nestview-page-title">
      <div class="title-box">
        <label>{{ modelobj.modelName }}</label>
        <span class="close-box" @click="goBack">X</span>
      </div>
    </div>-->
    <div class="nestview-page-content">
      <component :is="panelName" :modelobj="props.modelobj"></component>
      <!-- <div class="bottom-btn">
        <span
          class="btn-item"
          :class="{ 'btn-active': activeBtn == 'ConfigMap' }"
          @click="changePanel('ConfigMap')"
          >模型参数配置</span
        >
        <span
          class="btn-item"
          :class="{ 'btn-active': activeBtn == 'ConfigGplot' }"
          @click="changePanel('ConfigGplot')"
          >计算资源配置</span
        >
      </div>-->
    </div>
  </div>
</template>
<script setup>
import { ref, markRaw } from 'vue'
import ConfigMap from './cpns/ConfigMap/index.vue'
// import ConfigGplot from './cpns/ConfigGplot/index.vue'
import emitter from '@/utils/bus'
//记录当前模型的信息
const props = defineProps({
  modelobj: {
    type: Object,
    default: () => {}
  }
})
//控制按钮
const activeBtn = ref('configmap')
//组件面板
const panelName = ref(null)
//返回上一个界面
const goBack = () => {
  emitter.emit('goback', true)
}
//下方按钮点击触发面板切换
const changePanel = (val) => {
  activeBtn.value = val
  const lookup = {
    ConfigMap
    // ConfigGplot
  }
  panelName.value = markRaw(lookup[val])
}
//初始面板加载
changePanel('ConfigMap')
</script>
<style lang="less" scoped>
.bottom-btn {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 30px;
  left: 45%;
  transform: translate(-45%, 0%);
  .btn-item {
    border: 1px solid rgba(22, 155, 213, 1);
    padding: 8px 30px;
    cursor: pointer;
    color: #0054db;
    border-radius: 4px;
  }
  .btn-active {
    background: rgba(22, 155, 213, 1);
    color: #fff;
  }
  .btn-item + .btn-item {
    margin-left: 25px;
  }
}
</style>
